@-webkit-keyframes lightSpeedIn {

 0% {

 -webkit-transform: translate3d(200px, 0, 0) skewX(-30deg);

 transform: translate3d(200px, 0, 0) skewX(-30deg);

 opacity: 0;

}

 60% {

 -webkit-transform: skewX(20deg);

 transform: skewX(20deg);

 opacity: 1;

}

 80% {

 -webkit-transform: skewX(-5deg);

 transform: skewX(-5deg);

 opacity: 1;

}

 100% {

 -webkit-transform: none;

 transform: none;

 opacity: 1;

}

}

 @keyframes lightSpeedIn {

 0% {

 -webkit-transform: translate3d(200px, 0, 0) skewX(-30deg);

 -ms-transform: translate3d(200px, 0, 0) skewX(-30deg);

 transform: translate3d(200px, 0, 0) skewX(-30deg);

 opacity: 0;

}

 60% {

 -webkit-transform: skewX(20deg);

 -ms-transform: skewX(20deg);

 transform: skewX(20deg);

 opacity: 1;

}

 80% {

 -webkit-transform: skewX(-5deg);

 -ms-transform: skewX(-5deg);

 transform: skewX(-5deg);

 opacity: 1;

}

 100% {

 -webkit-transform: none;

 -ms-transform: none;

 transform: none;

 opacity: 1;

}

}

.lightSpeedIn {

	-webkit-animation-name: lightSpeedIn;

	animation-name: lightSpeedIn;

	-webkit-animation-timing-function: ease-out;

	animation-timing-function: ease-out;

}

 @-webkit-keyframes lightSpeedIn2 {

 0% {

 -webkit-transform: translate3d(-200px, 0, 0) skewX(30deg);

 transform: translate3d(-200px, 0, 0) skewX(30deg);

 opacity: 0;

}

 60% {

 -webkit-transform: skewX(-20deg);

 transform: skewX(-20deg);

 opacity: 1;

}

 80% {

 -webkit-transform: skewX(5deg);

 transform: skewX(5deg);

 opacity: 1;

}

 100% {

 -webkit-transform: none;

 transform: none;

 opacity: 1;

}

}

 @keyframes lightSpeedIn {

 0% {

 -webkit-transform: translate3d(-50px, 0, 0) skewX(30deg);

 -ms-transform: translate3d(-50px, 0, 0) skewX(30deg);

 transform: translate3d(-50px, 0, 0) skewX(30deg);

 opacity: 0;

}

 60% {

 -webkit-transform: skewX(-20deg);

 -ms-transform: skewX(-20deg);

 transform: skewX(-20deg);

 opacity: 1;

}

 80% {

 -webkit-transform: skewX(5deg);

 -ms-transform: skewX(5deg);

 transform: skewX(5deg);

 opacity: 1;

}

 100% {

 -webkit-transform: none;

 -ms-transform: none;

 transform: none;

 opacity: 1;

}

}

.case {

	padding-top: 2.86458%;

	padding-bottom: 1.5625%;

}

.swiper-case {

	margin-top: 1.5625%;

}

.swiper-case .swiper-slide {

	border: 1px solid #d9d9d9;

	box-sizing: border-box;

	-webkit-box-sizing: border-box;

	-moz-box-sizing: border-box;

}

.case-con {

	padding: 6.667% 9.3333% 5.333% 9.3333%;

}

.case-tit {

	font-size: 16px;

	color: #4d4c4c;

	line-height: 1;

	overflow: hidden;

	white-space: nowrap;

	text-overflow: ellipsis;

	-webkit-transition: all .4s ease-out;

	-o-transition: all .4s ease-out;

	transition: all .4s ease-out;

}

.case-txt {

	font-size: 12px;

	overflow: hidden;

	white-space: nowrap;

	text-overflow: ellipsis;

	color: #828282;

	line-height: 1;

	margin-top: 10px;

}

.case-line {

	width: 35px;

	height: 1px;

	background: #cfcece;

	margin-top: 8px;

	margin-bottom: 15px;

}

.case-time {

	font-size: 12px;

	color: #828282;

	line-height: 1;

}

.swiper-case .swiper-slide:hover .case-tit {

	color: #fbd301

}

.case-img {

	position: relative;

	overflow: hidden;

}

.case-img img {

	-webkit-transition: all 0.3s;

	-moz-transition: all 0.3s;

	-o-transition: all 0.3s;

	transition: all 0.3s;

}

.case-img::before {

	position: absolute;

	content: "";

	left: 0;

	top: 0;

	width: 100%;

	height: 100%;

	background-color: transparent;

	opacity: 0;

	-webkit-transform: perspective(400px) rotateX(-90deg);

	-moz-transform: perspective(400px) rotateX(-90deg);

	-ms-transform: perspective(400px) rotateX(-90deg);

	-o-transform: perspective(400px) rotateX(-90deg);

	transform: perspective(400px) rotateX(-90deg);

	-webkit-transform-origin: top;

	-moz-transform-origin: top;

	-ms-transform-origin: top;

	-o-transform-origin: top;

	transform-origin: top;

	-webkit-transition: all 0.3s;

	-moz-transition: all 0.3s;

	-o-transition: all 0.3s;

	transition: all 0.3s;

}

.swiper-pagination-bullet-active {

    opacity: 1;

    background: #fbd301;

}

.swiper-case .swiper-slide:hover .case-img::before {

	opacity: 1;

	-webkit-transform: perspective(400px) rotateX(0deg);

	-moz-transform: perspective(400px) rotateX(0deg);

	-ms-transform: perspective(400px) rotateX(0deg);

	-o-transform: perspective(400px) rotateX(0deg);

	transform: perspective(400px) rotateX(0deg);

}

.case-img::after {

	position: absolute;

	content: "";

	left: 0;

	top: 0;

	width: 100%;

	height: 100%;

	background: url(../img/case_icon.png) no-repeat center;

	-webkit-transition: all 0.2s 0.3s;

	-moz-transition: all 0.2s 0.3s;

	-o-transition: all 0.2s 0.3s;

	transition: all 0.2s 0.3s;

	opacity: 0;

}

.swiper-case .swiper-slide:hover .case-img::after {

	opacity: 1;

}

.swiper-case:hover {

}

.swiper-case .swiper-pagination {

	position: relative;

	font-size: 0;

	bottom: 0;

	width: auto;

	display: inline-block;

	vertical-align: middle;

}

.swiper-case .swiper-pagination-bullet {

	margin: 0 5px;

}

.swiper-button-prev, .swiper-button-next {

	position: relative;

	display: inline-block;

	width: 26px;

	height: 26px;

	font-size: 0;

	vertical-align: middle;

	margin: 0 10px;

	-webkit-transition: all .4s ease-out;

	-o-transition: all .4s ease-out;

	transition: all .4s ease-out;

}

.swiper-button-prev {

	background: url(../img/prev-icon1.png) no-repeat;

}

.swiper-button-next {

	background: url(../img/next_icon1.png) no-repeat;

}

.swiper-button-prev:hover {

	background: url(../img/prev-icon2.png) no-repeat;

}

.swiper-button-next:hover {

	background: url(../img/next_icon2.png) no-repeat;

}

.swiper-bottom {

	text-align: center;

	width: 100%;

	margin-top: 2.4767%;

}

.more {

	width: 80px;

	height: 30px;

	line-height: 28px;

	margin: 0 auto;

	display: block;

	color: #fbd301;

	text-transform: uppercase;

	border: 1px solid #fbd301;

	border-radius: 24px;

	font-size: 12px;

	text-align: center;

	margin-top: 1.8175%;

	vertical-align: middle;

	position: relative;

	background: url(../img/more_icon.png) no-repeat center right 12px;

}

.more:after {

	color: #fff;

}

.more {

	overflow: hidden;

	padding: 0;

	padding-right: 12px;

	box-sizing: border-box;

	-webkit-box-sizing: border-box;

	-moz-box-sizing: border-box;

	-webkit-transition: border-color 0.3s, background-color 0.3s;

	transition: border-color 0.3s, background-color 0.3s;

	-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);

	transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);

}

.more::after {

	font-size: 12px;

	content: attr(data-text);

	position: absolute;

	width: 100%;

	height: 100%;

	top: 0;

	left: 0;

	opacity: 0;

	color: #fff;

	padding-right: 12px;

	box-sizing: border-box;

	-webkit-box-sizing: border-box;

	-moz-box-sizing: border-box;

	background: url(../img/more_icon2.png) no-repeat center right 12px;

	-webkit-transform: translate3d(0, 25%, 0);

	transform: translate3d(0, 25%, 0);

}

.more > span {

	display: block;

}

.more.button--inverted {

	color: #7986cb;

}

.more.button--inverted:after {

	color: #fff;

}

.more::after, .more > span {

	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;

	transition: transform 0.3s, opacity 0.3s;

	-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);

	transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);

}

.more:hover {

	border-color: #fbd301;

	background-color: #fbd301;

}

.more:hover::after {

	opacity: 1;

	-webkit-transform: translate3d(0, 0, 0);

	transform: translate3d(0, 0, 0);

}

.more:hover > span {

	opacity: 0;

	-webkit-transform: translate3d(0, -25%, 0);

	transform: translate3d(0, -25%, 0);

}

@media (max-width: 992px) {

.menu-txt {

	padding-left: 8%;

	padding-right: 8%;

	padding-top: 10%;

}

.menu-info {

	line-height: 20px;

}

.menu-info {

	display: none;

}

.txt p:nth-child(1) {

	font-size: 24px;

}

.txt p:nth-child(2) {

	font-size: 16px;

}

.banner .swiper-slide .txt.txt2 p:nth-child(1), .banner .swiper-slide .txt.txt2 p:nth-child(2) {

	font-size: 24px;

}

.banner .swiper-slide .txt.txt4 p:nth-child(1) {

	font-size: 24px;

}

.banner .swiper-container-horizontal>.swiper-pagination-bullets {

	bottom: 10px;

}

}

@media (max-width: 768px) {

.case{

	padding-top: 30px;

	padding-bottom: 30px;

}

.swiper-case {

	margin-top: 20px;

}

.swiper-bottom {

	margin-top: 15px;

}

}